<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
		<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div class="container">
				<login v-if="showLogin"></login>
				<button class="btn btn-info" v-if="showLogin" @click="goReg" type="button">去注册</button>
				<reg v-else></reg>
				<button class="btn btn-success" v-if="!showLogin" @click="goLogin" type="button">去登录</button>
			</div>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			
			//创建login组件
			const login = Vue.extend({
				template:
	            `<div>
	              <label>手机号<input class="form-group" type="text" value="" /></label><br>
	              <label>密码<input class="form-group" type="text" value="" /></label><br>
	              <button class="btn btn-success" type="button">登录</button>
	            </div>`,
			});
			//创建reg组件
			const reg = Vue.extend({
				template: `
	          <div>
	            手机号<input type="text" value="" /><br>
	            密码<input type="text" value="" /><br>
	            验证码<input type="text" value="" /><br>
	            <button class="btn btn-info" type="button">获取验证码</button>
	            <button class="btn btn-primary" type="button">注册</button><br>
	          </div>
	        `,
				data() {
					return {
						name: '张三'
					}
				}
			});
	
	
			// 创建vm
			var vm = new Vue({
				el: "#root",
				//配置组件(局部注册)
				data: {
					showLogin:true
				},
				components: {
					login,
					reg
				},
				methods:{
					goReg(){
						this.showLogin = false
					},
					goLogin(){
						this.showLogin = true
					}
				}
			})
	
		</script>
	</body>
</html>
